<script lang="ts">
import { showSuccessToast } from 'vant';
import {onMounted, reactive, ref, toRefs} from 'vue';
import { saveUser } from '../api/user';
import {useLoginStore} from "../store/user";
import 'vant/es/toast/style'
export default {
  setup() {
    const loginStore=useLoginStore();
    let {age,gender,name,address,phone,job,id} =toRefs(loginStore.getUserInfo())
    let user= reactive({
      age:age.value,
      gender:gender.value,
      name:name.value,
      address:address.value,
      phone:phone.value,
      job:job.value,
      id:id.value
    })
    function onClickLeft() {
      history.go(-1)
    }
   async function save(){
     let res=await saveUser(user)
     setTimeout(()=>{
       showSuccessToast(res.data.msg);
     },1000)
     localStorage.setItem("user",JSON.stringify(user))
    }


    return {
      user,
      onClickLeft,
      save

    };
  },
};

</script>

<template>
  <div class="main">
    <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <van-cell-group inset>

      <!-- 输入任意文本 -->
      <van-field v-model="user.name" label="姓名"/>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="user.age"  label="年龄"/>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field v-model="user.phone"  label="手机号"/>
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="user.job"  label="职业"/>

      <van-field v-model="user.address"  label="住址"/>

    </van-cell-group>
    <van-button round block type="primary"  style="margin-top: 20px;" @click="save">
      保存
    </van-button>
  </div>

</template>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
}


</style>